// 第三发库
import React, { useState } from "react";
import { Button, Select, Space, Table } from "antd";
import { UnorderedListOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
// 自定义文件
import "./GrandList.sass";
// 组件配置
const { Option } = Select;

const showLength = [
  { value: 5, OptionName: "05 条可见" },
  { value: 10, OptionName: "10 条可见" },
  { value: 15, OptionName: "15 条可见" },
  { value: 20, OptionName: "20 条可见" },
];
const handleChange = (value) => {
  console.log(`selected ${value},缺回调`);
};
const addGrand = () => {
  console.log("点击添加新数据");
};

const columns = [
  //   {
  //     title: "Name", // 表头内容
  //     dataIndex: "name", //
  //     key: "name", // 虚拟渲染的key
  //     //表格元素中的组件渲染
  //     render: (text，items) => {
  //       第一个参数，data中 对应行，对应key 的参数
  //       第二个参数，data中 对应行，的所有参数
  //       console.log(text);
  //       return <Link to={"/testfoantd"}>{text}</Link>;
  //     },
  //   },
  {
    title: "品牌编号",
    dataIndex: "key",
    key: "key",
    align: "center",
  },
  {
    title: "品牌名称",
    dataIndex: "grandName",
    key: "grandName",
    align: "center",
  },
  {
    title: "商品种类数",
    dataIndex: "varietyCount",
    key: "varietyCount",
    align: "center",
    render: (title, item) => {
      return (
        <Link to={"/rootset/commodity/classfication"} state={item}>
          {title}
        </Link>
      );
      // 第一个参数是原本应该渲染的默认文本，title
      // 第二个参数是本行所有信息的对象，item
    },
  },
  {
    title: "操    作",
    key: "action",
    align: "center",

    render: (_, grandInf) => {
      return (
        <Space size="middle">
          <Button
            onClick={(e) => {
              console.log("grandInf: ", grandInf);
              console.log(e);
            }}
          >
            编辑
          </Button>
          <Button
            onClick={(e) => {
              console.log("grandInf: ", grandInf);
              console.log(e);
            }}
          >
            删除
          </Button>
        </Space>
      );
    },
  },
];
const data = [
  // {
  //   key: "1", //这个是必备的键值对，循环要用
  //   grandName: "娃哈哈",
  //   varietyCount: 97,
  // },
  // {
  //   key: "2",
  //   grandName: "白象",
  //   varietyCount: 98,
  // },
  // {
  //   key: "3",
  //   grandName: "旺仔",
  //   varietyCount: 99,
  // },
];

// 组件渲染
export default function GrandList(props) {
  const [dataBase] = useState(props.listInf);
  // console.log(props);
  return (
    <div className="GrandList">
      <div className="boxesTitle">
        <Space>
          <UnorderedListOutlined />
          数据列表
        </Space>
        <Space>
          <Select
            defaultValue={showLength[0].value}
            style={{
              width: 120,
            }}
            onChange={handleChange}
          >
            {showLength.map((item) => {
              return (
                <Option key={item.value} value={item.value}>
                  {item.OptionName}
                </Option>
              );
            })}
          </Select>
          <Button onClick={addGrand}>添加</Button>
        </Space>
      </div>
      <div className="grandShow">
        <Table
          columns={columns}
          dataSource={dataBase}
          // 在table中默认可以调用pagination，配置的属性，放在配置对象中
          pagination={{
            total: 88,
            showSizeChanger: false,
            showQuickJumper: false,
            showTotal: (a, b) => {
              return `共${data.length}条`;
            },
          }}
        />
      </div>
    </div>
  );
}
